<template>
    <div>
        <!-- 员工选择（根据工会组织id查询） -->
        <a-select
            v-bind="$attrs"
            v-on="$listeners"
            :placeholder="placeholder"
            :optionFilterProp="optionFilterProp"
            v-model="currentValue"
            allowClear
        >
            <a-icon v-if="fetching" style="color: #096dd9" slot="suffixIcon" type="loading" />
            <a-spin v-if="fetching" slot="notFoundContent" size="small" />
            <a-select-option v-for="i in list" :key="i.userId" :value="i.userId">{{ i.name }}</a-select-option>
        </a-select>
    </div>
</template>
<script>
import { getPageUnionEmployeeList } from '@/api/union/organizationManagement'

export default {
    inheritAttrs: false,
    name: 'SelectOrgPeople',
    props: {
        // v-model绑定的数据
        value: {
            type: [Array, String, Object],
        },
        // 组织id
        orgId: [String, Number, Object],

        // placeholder
        placeholder: {
            type: String,
            default: () => '请选择',
        },
        // 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索,否则为value
        optionFilterProp: {
            type: String,
            default: () => 'children',
        },
        // 是否初始化
        init: {
            type: Boolean,
            default: () => false,
        },
    },
    data() {
        return {
            fetching: false,
            list: [],
        }
    },
    watch: {
        orgId(e) {
            this.getList()
        },
    },
    mounted() {
        this.init && this.getList()
    },
    methods: {
        getList() {
            this.fetching = true
            getPageUnionEmployeeList({ pageSize: 1000, pageNumber: 1, query: { unionOrgId: this.orgId } })
                .then((res) => {
                    this.fetching = false
                    this.list = res.data
                })
                .catch((res) => {
                    this.fetching = false
                })
        },
    },
    computed: {
        // 转换绑定的选中数据，与v-model同步
        currentValue: {
            get: function () {
                return this.value || void 0
            },
            set: function (value) {
                this.$emit('input', value)
            },
        },
    },
}
</script>
